<template>
  <div>
    <div id="top"></div>
    <div id="content">
      <div id="shuju1"><span>数据列表</span></div>
      <el-row id="tianjia">
        <el-button @click="add">添加</el-button>
      </el-row>
      <!-- 添加信息框 -->
      <el-dialog title="添加标签" :visible.sync="addVisible" width="50%" top="1vh" :before-close="labelClose">
      <el-form label-width="80px" :model="from">
        <el-form-item label="标签名称" :required="true">
          <el-input v-model="from.name" :maxlength="10" placeholder="填写标签名称"></el-input>
        </el-form-item>
        <el-form-item label="用户人数" :required="true">
          <el-input v-model="from.renshu" :maxlength="10" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="标签条件" :required="true">
          <el-input v-model="from.tiaojian" :maxlength="11" resize="none"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="labelClose">取 消</el-button>
        <el-button type="primary" @click="labelAdm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 表格 -->
      <el-table
        ref="multipleTable"
        border
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="40"> </el-table-column>
        <el-table-column prop="id" label="序号" min-width="20%">
        </el-table-column>
        <el-table-column prop="name" label="标签名称" min-width="15%">
        </el-table-column>
        <el-table-column prop="renshu" label="用户人数" min-width="15%">
        </el-table-column>
        <el-table-column prop="tiaojian" label="标签条件" min-width="30%">
        </el-table-column>

        <hr />
        <el-table-column label="操作" min-width="20%">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="open(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="fenye">
        <span class="demonstration"></span>
        <el-pagination
          :current-page.sync="nowPage"
          @current-change="handleCurrentChange"
          :page-sizes="[8,16]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalData.length"
        >
        </el-pagination>
      </div>
      <div>
          <el-dialog
            title="用户标签详情"
            :visible.sync="CheckDialogVisible"
            width="50%"
            :before-close="editClose"
          >
            <!-- 编辑信息表-->
            <el-form
              ref="editTableData"
              :model="editTableData"
              label-width="200px"
            >
              <el-form-item prop="id" label="序号" >
                <el-input v-model="editTableData.id" width="200"></el-input>
              </el-form-item>
              <el-form-item prop="name" label="标签名称">
                <el-input v-model="editTableData.name" width="200"></el-input>
              </el-form-item>
              <el-form-item prop="renshu" label="用户人数">
                <el-input v-model="editTableData.renshu" width="200"></el-input>
              </el-form-item>
              <el-form-item prop="tiaojian" label="标签条件">
                <el-input v-model="editTableData.tiaojian" width="200"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="editClose">取 消</el-button>
              <el-button type="primary" @click="onEditOk">确 定</el-button>
            </span>
          </el-dialog>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      totalData:[],
      nowPage: 1,
      count: 8,
      from: {},
      addVisible: false,
      CheckDialogVisible: false,
      //  编辑表
      editTableData: {
        id: "",
        name: "",
        renshu: "",
        tiaojian: "",
      },
        from: {
        name: '',
        renshu: '',
        tiaojian: '',
      },
    };
  },

  mounted() {
        this.getUserLable();
    },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCurrentChange(val){
      console.log(val);
      this.nowPage=val;
    },
  //  获取数据
    getUserLable() {
          
          this.$axios({
              url: "/user_list/getlabel",
          }).then((res) => {
              this.totalData = res.data.data;
              console.log(res.data.data);
              
          });
      },
        // // 删除信息
        open(data) {
            this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.del(data);
            });
        },
        del(data) {
            this.$axios({
                url: "/user_list/getlabel1",
                method: "post",
                data: data,
            }).then((res) => {
                this.getUserLable();
                this.$message({
                  message: '用户标签删除成功',
                  type: 'success'
          });
            });
        },

         editClose() {
      this.CheckDialogVisible = false;
    },
    // 编辑数据
    handleEdit(data) {
      this.CheckDialogVisible = true;
      console.log(data);
      this.editTableData = data;
    },
    onEditOk() {
      this.$axios({
        url: "/user_list/YonghuEdit",
        data: {
          id: this.editTableData.id,
          name: this.editTableData.name,
          renshu: this.editTableData.renshu,
          tiaojian: this.editTableData.tiaojian,
        },
        method: "post",
      }).then((res) => {
        this.editTableData = res.data.data;
        console.log(res);
        if (res.data.code == 200) {
          this.$message("修改成功", "success");
          this.CheckDialogVisible = false;
        }
      });
    },
    //  添加信息
     labelClose() {
      this.$confirm('确认关闭？', {
        callback: (action, instance) => {
          if (action == 'cancel') {
            this.addVisible = true;
          } else if (action == 'confirm') {
            this.addVisible = false;
            this.from = {};
          }
        }
      })
    },
    labelAdm() {
      console.log(this.from)
      if (this.from.type == 'add') {
        this.addAdm();
        console.log('add')
      } else {
        this.editAdm();
      }
    },
    add() {
      this.addVisible = true;
      this.from.type = 'add';
    },
     addAdm() {
      if (this.from.name == '' || this.from.renshu == ''|| this.from.tiaojian == '') {
        this.$message({
          message: '有必填项未填写',
          type: 'error'
        });
      } else {
        this.addVisible = false;
        this.$axios({
          url: '/user_list/addlabel',
          method: 'post',
          data: this.from
        }).then(() => {
          this.getUserLable();
          this.from = {
            name: '',
            function: '',
            enable: true
          };
          this.$message({
            message: '添加成功',
            type: 'success'
          });
        })
      }
    },
  },
  // 分页
  computed: {
        tableData() {
            return this.totalData.slice(
                (this.nowPage - 1) * this.count,
                this.nowPage * this.count
            );
        },
    },
};
</script>
<style lang="less" scoped>
.el-main{
  box-sizing: border-box;
}
.el-table[data-v-2cdb8543]{
  margin: 0;
}
/deep/#top > :first-child > span {
  float: left;
}
/deep/#tianjia .el-button {
  float: right;
  margin-top: 20px;
  margin-right: 20px;
}
/deep/#shuju1{
  float: left;
  margin-top: 20px;
  margin-left: 20px;
}
/deep/#shuju1>span{
  font-size: 20px;
}

/deep/.fenye {
  text-align: center;
  margin: 20px 0;
}
/deep/#content {
  background-color: rgb(242, 242, 242);
}.el-table {
  margin: 20px;
}
/deep/.el-table th.el-table__cell > .cell {
  text-align: center;
  color: black;
  font-weight: 500;
}
/deep/.el-table .cell {
  text-align: center;
}
</style>
<style>
.el-main {
  overflow: visible;
}
</style>
